<template>
	<view>
			<view class='header'>
				<!-- <text>栎源家具</text> -->
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image v-if="avatarUrl" :src="avatarUrl"></image>
						<text v-else>请选择头像</text>
				</button>
				<input type="nickname" class="nickname" @change="chooseNickname" placeholder="请输入昵称"/>
			</view>
			<view class='content'>
				<view>申请获取以下权限</view>
				<text>获得你的公开信息(昵称，头像，手机号等)</text>
			</view>
			<button class='bottom' :disabled="nickname=='' || avatarUrl==''" type='primary' open-type="getPhoneNumber"
				@getphonenumber="getRealtimePhoneNumber"
				>
				授权手机号登录
			</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				avatarUrl:'',
				nickname:'',
			};
		},
		onLoad() {
		},
		methods: {
			//获取昵称
			chooseNickname(e){
				if(e.detail.value){
					this.nickname=e.detail.value;
					uni.setStorageSync('nickname', e.detail.value);
					console.log(this.nickname)
				}
			},
			//获取头像
			onChooseAvatar(e){
				if(e){
					this.avatarUrl=e.detail.avatarUrl;
					uni.setStorageSync('avatarUrl', e.detail.avatarUrl);
					console.log(this.avatarUrl)
				}
			},
			//获取手机号
			getRealtimePhoneNumber(e) {
			    console.log(e.detail.code,'动态令牌')  // 动态令牌
			    console.log(e.detail.errMsg,'回调信息') // 回调信息（成功失败都会返回）
			    console.log(e.detail.errno)  // 错误码（失败时返回）
					if(e.detail.code){
						this.login(e.detail.code);
					}else{
						uni.navigateBack();
					}
			 },
			 login(code){
				 const requestParam = {
				 	url: "/app/mall/registerByUserPhone?code="+code,
				 	method: "POST",
				 	callBack: (res) => {
				 		console.log(res)
						uni.setStorageSync('userId', res.data.id);
						uni.setStorageSync('phone', res.data.phone);
						setTimeout(()=>{
							uni.navigateBack();
						},500)
				 	}
				 }
				 this.$request(requestParam);
			 }
			// login() {
			// 	uni.login({
			// 		"provider": "weixin",
			// 		success: function(event) {
			// 			console.log(event, 777);
			// 			uni.getUserProfile({
			// 				desc: '用于完善会员资料',
			// 				success: res => {
			// 					uni.setStorageSync('userName', res.userInfo.nickName);
			// 					uni.navigateBack();
			// 				}
			// 			})
			// 		},
			// 		fail: function(err) {
						
			// 		}
			// 	})
			// },
			
			}
		}
</script>

<style lang="scss">
	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: auto;
		overflow: hidden;
		/* line-height: 450rpx; */
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}
	.avatar-wrapper{
		border: 1px solid #aaa;
		width: 170rpx;
		height: 170rpx;
		border-radius: 50%;
		font-size: 26rpx;
		line-height: 150rpx;
		padding: 0;
		image{
			width: 170rpx;
			height: 170rpx;
		}
	}
	.nickname{
		width: 80%;
		margin: auto;
		border: 1px solid #ccc;
		border-radius: 10rpx;
		margin: 50rpx auto 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		padding: 6rpx 20rpx;
		text-align: left;
	}
</style>
